<template>
	<my-scroll :style="{height}" @scrolltolower="$attrs.scrolltolower || scrolltolower">
		<slot :data="tableData">
			<my-table :columns="columns" :data="tableData" v-if=" type === 'table' " v-bind="$attrs">
				<template v-for="(slotKey, slotIndex) in Object.keys($slots)" :key="slotIndex" v-slot:[slotKey]>
					<slot :name="slotKey"></slot>
				</template>
			</my-table>

			<template v-else>
				<view v-for="(row, rowIndex) in tableData" :key="rowIndex" class="rowItem">
					<view v-for="(column,colIndex) in columns" :key="colIndex" class="flex colItem"
						v-bind="{...column,...row}">
						<slot :name="column.prop || 'default'" v-bind="{row, column, rowIndex}">
							<view>
								<up-text :lines="1" :text="`${column.label}：`" block />
							</view>
							<up-text :lines="1" :text="row[column.prop]" type="info" />
						</slot>
					</view>
				</view>
			</template>
		</slot>
	</my-scroll>
</template>

<script setup>
	import {
		isNumber
	} from 'lodash';

	/***
	 * 参数属性
	 * @property {Array} columns 表格列
	 * @property {Number, String} height 滚动高度，默认300px
	 * @property {Function} loadFn 表格数据请求函数
	 * @property {Boolean} isAuto 是否在初始化时自动加载数据
	 * @property {Number} pageSize 每页条数 默认10
	 * @property {Boolean} autoPage 是否默认分页，即自定义实现分页效果
	 * @property {String} type 数据展示形式
	 */
	const props = defineProps({
			columns: {
				type: Array,
				default: () => [],
			},
			height: {
				type: [Number, String],
				default: 300,
			},
			// 加载数据函数，传入参数：pageIndex，pageSize，必须要返回Promise
			loadFn: {
				type: Function,
				default: null
			},
			// 是否在初始化时自动加载数据
			isAuto: {
				type: Boolean,
				default: true
			},
			pageSize: {
				type: Number,
				default: 10
			},
			autoPage: {
				type: Boolean,
				default: false,
			},
			type: {
				type: String,
				default: 'table',
				validator(val) {
					return ['table', 'list'].includes(val);
				}
			}
		}),
		height = computed(() => {
			if (!isNumber(props.height)) return props.height;
			return `${props.height}px`;
		});

	let tableTotalList = [],
		tableData = ref([]),
		pageIndex = 1,
		total = 0;

	function loadData() {
		if (pageIndex === 1) tableData.value = []
		props.loadFn(pageIndex, props.pageSize).then((res) => {
			if (props.autoPage) {
				tableTotalList = res.data;
				tableData.value = tableTotalList.slice(0, 10);
			} else {
				total = res.total;
				tableData.value.push(...res.data);
			}
		})
	}

	function scrolltolower() {
		if (props.autoPage) {
			if (tableData.value.length <= tableTotalList.length) {
				tableData.value.push(...tableTotalList.slice(tableData.value.length, tableData.value.length + 10))
			}
		} else {
			if (tableData.value.length < total) {
				pageIndex++;
				loadData();
			}
		}
	}

	/**
	 * 组件重置函数
	 * @Function reload
	 */
	function reload() {
		pageIndex = 1;
		loadData();
	}
	// 初始化逻辑
	props.isAuto && loadData();
	// 属性、方法抛出
	defineExpose({
		loadData,
		reload
	});
</script>

<style lang="scss" scoped>
	.rowItem {
		background-color: rgb(245, 247, 254);
		border: 1px solid rgb(220, 227, 232);
		padding: 10rpx;
		border-radius: 20rpx;

		&+.rowItem {
			margin-top: 20rpx;
		}

		.colItem {
			padding: 10rpx;
		}
	}
</style>